<template>
  <div style="display: flex;justify-content: center;" class="common-layout" >
    <el-container>
      <el-header >
        <div>
          <el-form>
            <el-row>
              <el-col :span="7"></el-col>
              <el-col :span="8" style="display: flex;justify-content: flex-end;padding-right: 0px">
                <el-form-item style="width:35%">
                  <el-select v-model="search" placeholder="请选择城市" >
                    <el-option label="山西" value="shanxitravelgroup?address=shanxi"></el-option>
                    <el-option label="成都" value="chengdutravelgroup?address=chengdu"></el-option>
                    <el-option label="郑州" value="zz"></el-option>
                    <el-option label="北京" value="bj"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="display: flex;justify-content: flex-start;">
                <el-form-item style="padding-left: 0px">
                  <el-input
                      style="width: 100%"
                      ref="searchInput"
                      placeholder="请输入搜索内容"
                      prefix-icon="el-icon-search"
                      :class="{ 'rounded-input': true }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1" style="display: flex;justify-content: flex-start;">
                <el-form-item >
                  <el-button type="primary" style="text-align: center;background-color: orange" @click="routerSearch">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-header>
    </el-container>
  </div>
  <div style="padding-top: 5px;position: relative">
    <el-row>
      <el-col :span="6">
        <el-card style="padding-bottom:20px;width: 400px;height: 720px;position: relative">
          <ul style="list-style-type: square;position: absolute;">
            <li style="text-align: left;margin: 0 "><span><h3 style="display: inline;">热门推荐</h3><br></span></li>
            <li style="text-align: left;margin: 0 ;list-style-type:none">
              <span><h6 style="display: inline;"><a href="/tours" style="text-decoration: none;" class="no-color-change">山西</a> 重庆 九寨沟 三亚 北京 成都 西安 桂林</h6><br></span>
            </li>
            <hr width="100%" color="#F0F0F0" >
            <li style="text-align: left;margin: 0 "><span><h3 style="display: inline;">云南/贵州</h3><br></span></li>
            <li style="text-align: left;margin: 0 ;list-style-type:none"><span><h6 style="display: inline">昆明 丽江 西双版纳 贵阳 大理市 香格里拉 腾冲</h6><br></span></li>
            <hr width="100%"  color="#F0F0F0">
            <li style="text-align: left;margin: 0 "><span><h3 style="display: inline;">海南/福建</h3><br></span></li>
            <li style="text-align: left;margin: 0 ;list-style-type:none"><span><h6 style="display: inline">三亚 厦门 福州 泉州 万宁 海口 鼓浪屿 西沙群岛</h6><br></span></li>
            <hr width="100%"  color="#F0F0F0">
            <li style="text-align: left;margin: 0 "><span><h3 style="display: inline;">东北</h3><br></span></li>
            <li style="text-align: left;margin: 0 ;list-style-type:none"><span><h6 style="display: inline">大连 哈尔滨 长白山 延吉 沈阳 大兴安岭 漠河 长春</h6><br></span></li>
            <hr width="100%" color="#F0F0F0">
            <li style="text-align: left;margin: 0 "><span><h3 style="display: inline;">中国港澳台</h3><br></span></li>
            <li style="text-align: left;margin: 0 ;list-style-type:none"><span><h6 style="display: inline">香港 澳门 台湾</h6><br></span></li>
            <hr width="100%" color="#F0F0F0">
            <li style="text-align: left;margin: 0 "><span><h3 style="display: inline;">国内其他</h3><br></span></li>
            <li style="text-align: left;margin: 0 ;list-style-type:none"><span><h6 style="display: inline">太原 五台山 大同 桂林 九寨沟 成都 平遥古城 北京</h6><br></span></li>
            <hr width="100%" color="#F0F0F0">
          </ul>
        </el-card>
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="16">
        <el-row>
          <el-carousel style="width: 100%; margin:0;position: absolute;float: left;display: block">
            <el-carousel-item v-for="p in bannerArr">
              <img :src="p" style="width:100%;height:100%">
            </el-carousel-item>
          </el-carousel>
        </el-row>

        <el-row :gutter="0" style="margin:300px 0 0 0;width: 100%">
          <el-col :span="8" v-for="p in productArr" style="margin: 10px 0;">
            <el-card style="padding-bottom:20px;height: 300px;padding-right: 0px;position: relative">
              <img :src="p.url" style="width: 100%;height: 280px;display: inline" >
              <h5 style="display: block;position: absolute;top: 0px;left:30px;color: white;font-size: 30px;font-weight: bold">
                {{ p.title }}</h5><br>
              <span style="display: block;position: absolute;top: 120px;left:30px;color: white;font-size: 22px;font-weight:lighter;width: 150px">{{ p.info }}<br></span><br>
              <span style="display: block;position: absolute;top: 150px;left:30px;color: white;font-size: 22px;font-weight:lighter">{{p.info1}}<br></span><br>
              <span style="display: block;position: absolute;top: 235px;left:30px;color: white;font-size: 22px;background-color: rgba(128, 128, 128, 0.6);width: 100px;height: 50px;line-height: 50px;text-align: center">去看看</span><br>
            </el-card>
          </el-col>
         </el-row>

          <el-row :gutter="0" style="margin:5px 0 0 0;width: 100%">
              <el-col :span="24">
                <el-card style="position: relative;width: 100%;height: 90px;background-color: rgba(128, 128, 128, 0.2)">
                  <img src="/travelAgent/index/travelpeople.jpg" style="width: 70px;height: 70px;position: absolute;top: 10px;left: 50px"/>
                  <span style="font-size: 50px;display: block;position: absolute;top: 15px;left: 18%;color:#87cefa;font-family: '宋体', sans-serif;">出游提醒</span>
                  <span style="font-size: 30px;display: block;position: absolute;top: 23px;left: 45%;color:#4682B4">中国外交部·中国文化和旅游部>></span>
                </el-card>
              </el-col>
          </el-row>
      </el-col>
    </el-row>
  </div>
  <div style="padding-top: 5px;position: relative">
    <el-container>
      <el-header>
        <el-row style="margin:1% 0 0 0;width: 100%;position:absolute;">
          <el-col :span="5">
            <img src="/travelAgent/index/周边游.png" style="width: 250px;height: 40px;position: absolute;"/>
          </el-col>
          <el-col :span="15" style="text-align: left;margin-top: 5px">
              <el-button v-for="index in cityArr" link type="text" @click="updateCityId(index.cityId)" style="color: #000;font-size:16px;font-weight: bold;text-decoration: none;top: 10px;" >
                {{ index.market }}</el-button>
          </el-col>
        </el-row>
        <el-row style="margin:2.5% 0 0 0;width: 100%;position:absolute;">
          <el-col :span="5"></el-col>
          <el-col :span="14">
            <hr style="height: 1px;background-color:grey;width: 100%">
          </el-col>
        </el-row>
      </el-header>
      <el-main  style="height: 48vh;overflow-y: auto;">
        <div style="padding-top: 0;position: relative">
          <el-row :gutter="20" style="margin:1% 0 0 0;width: 100%;position:absolute;">
            <el-col :span="4.8" v-for="p in travelDetailCityArr" style="margin: 0;">
              <el-card style="padding-bottom:20px;width: 200px;height: 180px;padding-right: 0px;position: relative">
                <img :src="p.imgUrl" style="width: 100%;height: 50%;display: block" >
                <!--          <h5 style="display: block;position: absolute;top: 50px;left:25px;color: white;font-size: 30px;font-weight: bold;">
                            {{ p.title }}</h5><br>-->
                <el-button link @click="routerGroup(p.travelDetailId)"><span style="display: block;position: absolute;top: 150px;left:20px;color: orange;
          font-size: 20px;font-weight:lighter;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
          width: 160px;height: 20px;">{{ p.travelAgentName }}<br></span><br></el-button>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>

  <div style="padding-top: 5px;position: relative">
    <el-container>
      <el-header>
        <el-row style="margin:1% 0 0 0;width: 100%;position:absolute;">
          <el-col :span="5">
            <img src="/travelAgent/index/境内游.png" style="width: 250px;height: 40px;position: absolute;left: 0"/>
          </el-col>
          <el-col :span="15" style="text-align: left;margin-top: 5px">
              <el-button v-for="index in provinceArr" link type="text" @click="updateProvinceId(index.provinceId)" style="color: #000;font-size:16px;font-weight: bold;text-decoration: none;top: 10px;" >
                {{ index.province }}</el-button>
          </el-col>
        </el-row>
        <el-row style="margin:2.5% 0 0 0;width: 100%;position:absolute;">
          <el-col :span="5"></el-col>
          <el-col :span="14">
            <hr style="height: 1px;background-color:grey;width: 100%">
          </el-col>
        </el-row>
      </el-header>
      <el-main  style="height: 48vh;padding-top: 0px;overflow-y: auto;">
        <div style="padding-top: 0;position: relative">
          <el-row :gutter="20" style="margin:1% 0 0 0;width: 100%;position:absolute;">
            <el-col :span="4.8" v-for="p in travelDetailProvinceArr" style="margin: 0;">
              <el-card style="padding-bottom:20px;width: 200px;height: 180px;padding-right: 0px;position: relative">
                <img :src="p.imgUrl" style="width: 100%;height: 50%;display: block" >
                <!--          <h5 style="display: block;position: absolute;top: 50px;left:25px;color: white;font-size: 30px;font-weight: bold;">
                            {{ p.title }}</h5><br>-->
                <el-button link @click="routerGroup(p.travelDetailId)"><span style="display: block;position: absolute;top: 150px;left:20px;color: orange;
          font-size: 20px;font-weight:lighter;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
          width: 160px;height: 20px;">{{ p.travelAgentName }}<br></span><br></el-button>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import router from "@/router";

const cityId = ref(1);
const provinceId = ref(1);

const routerGroup = (id) => {
  console.log(id)
  router.push('/shanxitravelgroup?id='+id)
}

const  travelDetailQuery = ref({
  cityId : cityId,
  provinceId : provinceId
});

//保存不同城市的旅行社信息
const travelDetailCityArr = ref([])
//查找不同城市的旅行社信息
const updateCityId = (id) => {
  travelDetailQuery.value.cityId=id;
  let data = qs.stringify(travelDetailQuery.value);
  console.log(travelDetailQuery.value)
  axios.get(BASE_URL+'/travelagent/searchTravelDetailCity?'+data)
      .then((response)=>{
        if(response.data.code===2000){
          travelDetailCityArr.value = response.data.data;
          console.log(travelDetailCityArr);
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}

//保存不同省份的旅行社信息
const travelDetailProvinceArr = ref([])
//查找不同省份的旅行社信息
const updateProvinceId = (id) => {
  provinceId.value=id;
  let data = qs.stringify(travelDetailQuery.value);
  console.log(travelDetailQuery.value)
  axios.get(BASE_URL+'/travelagent/searchTravelDetailProvince?'+data)
      .then((response)=>{
        if(response.data.code===2000){
          travelDetailProvinceArr.value = response.data.data;
          console.log(travelDetailProvinceArr);
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}

const search = ref({})

const routerSearch = () => {
  router.push(search.value);
}


//保存城市
const cityArr = ref([]);
//查询城市
const selectCity = () => {
    axios.get(BASE_URL+'/travelagent/city/select')
        .then((response)=>{
           if(response.data.code===2000){
              cityArr.value = response.data.data;
              console.log(cityArr.value)
           }else{
             ElMessage.error(response.data.msg);
           }
        })
}

//保存省份
const provinceArr = ref([])
//查询省份
const selectProvince = () => {
  axios.get(BASE_URL+'/travelagent/province/select')
      .then((response)=>{
        if(response.data.code===2000){
          provinceArr.value = response.data.data;
          console.log(provinceArr.value)
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}

onMounted(()=>{
  selectCity();
  selectProvince();
  updateCityId(1);
  updateProvinceId(1);
})

//1.准备轮播图数组
const bannerArr = ref(["/travelAgent/index/travel1.jpg", "/travelAgent/index/travel2.jpg", "/travelAgent/index/travel3.jpg", "/travelAgent/index/travel4.jpg",
  "/travelAgent/index/travel5.jpg","/travelAgent/index/travel6.jpg","/travelAgent/index/travel7.jpg","/travelAgent/index/travel8.jpg"]);
//2.准备旅行社对象数组
const productArr = ref([
  {
    title: "跟团游",
    info: "省钱省心·一站打包",
    url: "/travelAgent/index/travel1.jpg"
  },
  {
    title: "私家游",
    info: "独立出行·行程可调",
    url: "/travelAgent/index/travel2.jpg"
  },
  {
    title: "自由行",
    info: "交通·酒店·景点",
    info1: "随心组合",
    url: "/travelAgent/index/travel3.jpg"
  }]);
</script>


<style scoped>
.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.rounded-input {
  border-radius: 50px; /* 使输入框呈椭圆形 */
  padding-left: 10px; /* 调整内边距 */
}

/* 可以根据需要调整其他样式 */
.el-input__inner {
  padding-right: 30px; /* 为图标留出空间 */
}

.el-input__prefix {
  transform: translateX(10px); /* 微调图标位置 */
}

.no-color-change:link {
  color: black; /* 未访问的链接颜色 */
}

.no-color-change:visited {
  color: black; /* 已访问的链接颜色 */
}

.no-color-change:hover {
  color: black; /* 鼠标悬停时的链接颜色 */
}

.no-color-change:active {
  color: black; /* 链接被激活时的颜色 */
}


</style>